﻿@{
    ViewData["Title"] = "PDF加水印";

    var layoutSelectList = new List<SelectListItem>()
{
        new SelectListItem(){ Text="左上方",Value="1"},
        new SelectListItem(){ Text="顶部中间",Value="2"},
        new SelectListItem(){ Text="右上方",Value="3"},
        new SelectListItem(){ Text="左边",Value="4"},
        new SelectListItem(){ Text="中间",Value="5"},
        new SelectListItem(){ Text="右边",Value="6"},
        new SelectListItem(){ Text="左下方",Value="7"},
        new SelectListItem(){ Text="底部中间",Value="8"},
        new SelectListItem(){ Text="右下方",Value="9"},
    };
}

<div class="content">
    <div class="content-body">
        <div class="tool-title clearfix">
            <h1 class="tool-name">PDF加水印</h1>
        </div>
        <div class="tool-form">
            <div class="alert-msg alert alert-danger tp10" style="display:none;">
                请选择pdf
            </div>
            <form asp-action="UpdatePDFAddWatermark" asp-controller="pdf"
                  enctype="multipart/form-data" data-ajax="true" data-ajax-success="PDFAddWatermarkOnSuccess" data-ajax-failure="onFailed" data-ajax-method="post">
                <input type="hidden" name="OldPath" value="" />
                <input type="hidden" name="WatermarkPath" value="" />
                <div class="img-select">
                    <img src="/images/add.png" id="qr-canvas" width="140" height="140" alt="选择pdf" />
                    <input type="file" name="files" accept="application/pdf" onchange="PDFAddWatermarkUpload(this)" title="选择pdf">
                    <p class="pdf-name"></p>
                </div>
                <div class="img-select" style="width:25%">

                    <span class="flex1">
                        水印类型：
                        <input type="radio" name="type" value="img" />&nbsp;图片&nbsp;&nbsp;
                        <input type="radio" name="type" value="text" />&nbsp;文字
                    </span>

                    <span class="flex1">
                        水印数量：
                        <input type="radio" name="number" value="one" />&nbsp;一个&nbsp;&nbsp;
                        <input type="radio" name="number" value="covered" />&nbsp;铺满
                    </span>

                    <span class="flex1">
                        水印位置：
                        <input type="radio" name="location" value="top" />&nbsp;内容上面&nbsp;&nbsp;
                        <input type="radio" name="location" value="covered" />&nbsp;内容下面
                    </span>

                    <span class="flex1">旋转角度：<input type="text" name="rotation" class="form-control" style="margin-right:5px;width:40%" />px</span>

                    @Html.DropDownList("layout", layoutSelectList, new { @class = "form-control" })

                    <span class="flex1">
                        水印文字：
                        <input type="text" name="waterMarkName" class="form-control">
                    </span>

                    <div class="wp100 tp10">
                        <a href="javascript:;" class="a-btn" onclick="$('form').submit()">转换</a>
                    </div>
                </div>

                <div class="img-select img-watermark">
                    <img src="/images/img-0.png" id="watermark-canvas" width="140" height="140" style="display:none" alt="选择水印图片" />
                    <input type="file" name="files" accept="application/pdf" onchange="PDFToImageUpload(this)" title="选择水印图片">
                </div>
                <div class="img-select">
                    <img src="/images/pdf.png" width="140" height="140" class="show-img" style="display:none;" alt="效果图" />
                    <p class="pdf-image"></p>
                    <div class="wp100 tp10">
                        <a href="javascript:;" class="a-btn down-btn" target="_blank" style="display:none;">保存</a>
                    </div>
                </div>
                <div id="tool-result" class="hide"></div>
            </form>
        </div>
        <div class="wwads-cn wwads-horizontal" data-id="102" style="max-width:100%"></div>
        <div class="tool-info">
            @*<h5>相关知识</h5>
                <p>本工具对图像进行处理，部分浏览器不支持。</p>*@
        </div>

    </div>
</div>

@section scripts{
    <script src="~/js/jquery-validate/jquery.unobtrusive-ajax.js"></script>
}